<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="show()">
		用户名：<input id="uname" onblur="check()" type="text"><span id="user_span"></span><br>
		邮箱：<input id="email" type="email"><br>
		电话：<input id="phone" type="text"><br>
		姓名：<input id="username" type="text"><br>
		性别：<input type="radio" name="gender" id="man" value="1" /><label for="man">男</label>
				<input type="radio" name="gender" id="woman" value="0" /><label for="woman">女</label>
				<input type="radio" name="gender" id="unkonw" value="-1" /><label for="unkonw">保密</label><br>
		<button type="button" onclick="edit_user()">修改</button>
		
		<script>
			// 第一种方法
			// 获取url地址
			// let urldata = location.href;
			// // 使用split方法根据?id=分割字符串成数组
			// let id = urldata.split('?id=')[1];
			
			// 第二种方法
			let urlobj = new URLSearchParams(location.search);
			let uid = urlobj.get('id');
			
			//原名称
			let old_name = '';
			
			//判断用户名是否重复
			function check(){
				let _name = uname.value;
				
				if(old_name == _name){
					return user_span.innerHTML = '用户名可使用';
				}else{
					//获取对象
					let xhr = new XMLHttpRequest();
					//接收响应，打开监听
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4 && xhr.status == 200){
							let data = xhr.responseText;
							if(data == 1){
								alert('用户名已存在');
								//页面刷新
								location.reload();
							}
						}
					};
					//打开连接
					xhr.open('GET',`/pro/v1/getUname/${_name}`,true);
					//发送请求
					xhr.send();
				}
			}
			
			//获取用户数据
			function show(){
				//创建对象
				let xhr = new XMLHttpRequest();
				//接收响应，打开监听
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						let data = JSON.parse(xhr.responseText)[0];
						// console.log(data);
						uname.value = data.uname;
						old_name = data.uname;
						
						email.value = data.email;
						phone.value = data.phone;
						username.value = data.user_name;
						if(data.gender == 1){
							man.checked = true;
						}else if(data.gender == 0){
							woman.checked = true;
						}else{
							unkonw.checked = true;
						}
					}
				};
				//打开连接
				xhr.open('GET',`/pro/v1/searchById/${uid}`,true);
				//发送请求
				xhr.send();
			}
			
			//修改用户
			function edit_user(){
				let _uname = uname.value;
				let _email = email.value;
				let _phone = phone.value;
				let _username = username.value;
				let _usersex = document.getElementsByName('gender');
				let gender;
				for(let key in _usersex){
					if(_usersex[key].checked){
						gender = _usersex[key].value;
					}
				}
				
				//非空判断
				if(!_uname){
					return alert('用户名不能为空');
				}
				if(!_email){
					return alert('邮箱不能为空');
				}
				if(!_phone){
					return alert('联系方式不能为空');
				}
				if(!_username){
					return alert('姓名不能为空');
				}
				if(!_usersex){
					return alert('性别不能为空');
				}
				
				if(confirm('确认修改?')){
					//创建对象
					let xhr = new XMLHttpRequest();
					//接收响应，打开监听
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4 && xhr.status == 200){
							let data = xhr.responseText;
							if(data == 1){
								alert('修改成功');
								location.href = '/list.html';
							}else{
								alert('修改失败');
							}
						}
					};
					//打开连接
					xhr.open('PUT','/pro/v1/update',true);
					//设置头信息
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					//设置主体数据
					let data = `uname=${_uname}&email=${_email}&phone=${_phone}&user_name=${_username}&gender=${gender}&uid=${uid}`;
					//发送请求
					xhr.send(data);
				}
			}
			
		</script>
	</body>
</html>
